<template>
  <div class="page">
    <!-- 上方区域 -->
    <div class="card">
      <!-- 区域1 -->
      <div class="section section-1">
        <span class="label">布线</span>
        <span class="title">基础信息</span>
        <img src="@/assets/xiangmujindu/icon_qrcode.png" alt="二维码" class="qr-code" @click="handleQRCodeClick" />
      </div>
      <!-- 区域2 -->
      <div class="section section-2">
        <p v-for="(text, index) in projectDetails" :key="index" class="detail-text">{{ text }}</p>
      </div>
      <!-- 区域3 -->
      <div class="section section-3">
        <img src="@/assets/xiangmujindu/icon_phone.png" alt="电话" class="phone-icon" :style="{ width:'20px', height: '20px'}"/>
        <span class="contact-text">联系售前</span>
      </div>
      <!-- 区域4 -->
      <div class="section section-4">
        <div
          v-for="(btn, index) in actionButtons"
          :key="index"
          class="action-button"
          @click="navigateTo(btn.route)"
        >
          <img :src="btn.icon" alt="图标" />
          <span>{{ btn.text }}</span>
        </div>
      </div>
    </div>

    <!-- 下方区域 -->
    <div class="card">
      <!-- Tabs -->
      <div class="tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab"
          :class="{ active: activeTab === index }"
          @click="activeTab = index"
        >
          {{ tab }}
        </div>
      </div>
      <!-- Tab 内容 -->
      <div class="tab-content">
        <!-- 第一个 Tab 内容 -->
        <div v-if="activeTab === 0">
          <div class="timeline">
            <div v-for="(node, index) in timeline" :key="index" class="timeline-node">
              <div :class="['timeline-status', { active: node.active }]"></div>
              <span>{{ node.name }}</span>
              <p v-if="node.text" class="node-text">{{ node.text }}</p>
            </div>
          </div>
          <div v-for="(item, index) in tab1Content" :key="index" class="content-box">
            <h3>{{ item.title }}</h3>
            <p style="white-space: pre-wrap;">{{ item.text }}</p>
          </div>
        </div>

        <!-- 第二个 Tab 内容 -->
        <div v-if="activeTab === 1" class="schedule scheduling-plan">
          <h3>查看排班计划</h3>
          <div v-for="(item, index) in tab2Content" :key="index"  >
           
            <!-- 如果需要，可以继续添加更多的p标签 -->

            <p style="white-space: pre-wrap;">{{ item }}</p>

          </div>
        </div>

        <!-- 第三个 Tab 内容 -->
        <div v-if="activeTab === 2" class="data-table">
          <table>
            <thead>
              <tr>
                <th v-for="header in tab3Content.headers" :key="header">{{ header }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, rowIndex) in tab3Content.rows" :key="rowIndex">
                <td v-for="cell in row" :key="cell">{{ cell }}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 第四个 Tab 内容 -->
        <div v-if="activeTab === 3" class="text-list">
          <p v-for="text in tab4Content" :key="text">{{ text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 区域 1 数据
      projectDetails: [
        '项目编号：7012193',
        '项目名称: 阳泉D4模组H800集群布线集成服务',
        '机房地址: 北京市海淀区玉泉慧谷2期',
        '工作内容: 服务器综合布线',
        '计划时间: 2024-09-18 至 2024-09-30 | 预计2人天',
        '外雇签到: 否'
      ],
      actionButtons: [
        { text: '差旅申请', route: 'chailvshenqing.vue', icon:require('../assets/xiangmujindu/dp_icon_clsq.png') },
        { text: '考勤审核', route: 'kaoqinshenhe.vue', icon:require('../assets/xiangmujindu/dp_icon_kqsp.png') },
        { text: '派工', route: 'paigong.vue', icon:require('../assets/xiangmujindu/dp_icon_pg.png') },
        { text: '结单', route: 'jiedan.vue', icon:require('../assets/xiangmujindu/dp_icon_jd.png') },
        { text: '打卡', route: 'daka.vue', icon:require('../assets/xiangmujindu/dp_icon_dk.png') },
      ],
      // Tabs 数据
      tabs: ['项目进度', '派工安排', '工作量', '需求信息'],
      activeTab: 0,
      // 第一个 Tab 数据
      timeline: [
        { name: '派工', active: true, text: '完成时间: 2024' },
        { name: '施工中', active: true },
        { name: '完成', active: false },
      ],
      tab1Content: [
        { title: '施工要求', text: '一、配线设备机架安装要求:\n1、采用下走线方式时，架底位置与电缆上线孔相对应;\n2、各直列垂直倾斜误差不应大于3mm，底座水平误差每平方米不应大于2mm;\n3、接线端子各种标志应齐全;\n4、交接箱或暗线箱宜暗设在墙内。预留墙洞安装，箱底高出地面宜为500~1000mm。\n二、各类接线模块安装要求:\n1、模块设备应完整，安装就位，标志齐全;\n2、安装螺丝必须拧紧，面板应保持在一个水平面上。' },
        { title: '人员要求', text: '需含登高证、电工证' },
        { title: '验收要求', text: '1、缆线的布放前应核对规格、程式、路由及位置与设计规定相符。\n2、缆线的布放应平直，不得产生扭绞、打圈等现象，不应受到外力的挤压和损伤\n3、缆线在布放前两端应贴有标签、以表明起始和终端位置，标签书写应清晰、端正和正确,' },
      ],
      // 第二个 Tab 数据
      tab2Content: ['派单时间: 2024-09-19 12:10:18   分派人员数: 5人', '派单时间: 2024-09-23 15:08:33   分派人员数: 7人'],
      // 第三个 Tab 数据
      tab3Content: {
        headers: ['安装类型', '二级分类', '数量'],
        rows: [
          ['类型1', '分类1', '10'],
          ['类型2', '分类2', '20'],
          ['类型3', '分类3', '30'],
        ],
      },
      // 第四个 Tab 数据
      tab4Content: [
        '需求编号: 2837273',
        '需求名称: 阳泉D4模组H800集群布线集成服务',
        '关联项目: 英业达字节跳动综合布线2024年',
        '计划时间: 2024-09-18至2024-09-30预计2人天',
        '业务类型: 布线',
        '时效要求: 一般优先级-10个工作日',
        '计费方式: 工作量'
      ],
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    navigateTo(route) {
      console.log(`跳转到: ${route}`);
      // 这里可以实现跳转逻辑
    },
    handleQRCodeClick() {
      console.log('二维码点击事件');
      // 处理二维码点击
    },
    replaceNewline(str) {
      return str.replace(/\n/g, '<br>');
    }
  },
};
</script>


<style scoped>
.page {
  background-color: #f4f5f9;
  padding: 10px;
}

.card {
  background-color: white;
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 20px;
}

/* 区域 1 样式 */
.section {
  margin-bottom: 10px;
}

.section-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-4 {
  background-color: #f4f5f9;
}

.label {
  background-color: #c89604;
  font-size: 12px;
  padding: 2px 5px;
  color: white;
}

.title {
  font-size: 22px;
  font-weight: bold;
}

.qr-code {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.detail-text {
  font-size: 12px;
  color: #727272;
}

/* Action 按钮 */
.action-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 5px;
  padding: 5px;
  font-size:13px;
}

.action-button img {
  width: 30px;
  height: 30px;
}

/* Tabs 样式 */
.tabs {
  display: flex;
  background-color: #f7f8fc;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  font-size: 13px;
}

.tab.active {
  background-color: #f1f9e8;
  color: #78a23a;
  font-weight: bold;
}

.tab-content {
  margin-top: 10px;
}

/* 时间轴 */
.timeline {
  background-color: #f1f9e8;
  padding: 10px;
  border-radius: 5px;
}

.timeline-node {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.timeline-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #ccc;
}

.timeline-status.active {
  background-color: #78a23a;
}

.node-text {
  color: #a7a7ab;
  font-size: 12px;
}

.content-box h3 {
  font-weight: bold;
  margin-bottom: 5px;
}

.content-box p {
  font-size: 13px;
}

/* ------------ 排班计划安排 start ------------ */
.scheduling-plan {
  background-color: #F4F5F9;
  padding: 10px;
  border-radius: 8px; /* 可选，添加圆角 */
}
 
.scheduling-plan h2 {
  margin-top: 0;
  margin-bottom: 16px;
}
 
.scheduling-plan p {
  margin: 8px 0;
  padding-bottom: 8px; /* 为了给下划线留出空间 */
  border-bottom: 1px solid #ddd; /* 添加下划线 */
  font-size: 13px;
}
 
/* 最后一个p标签不需要下划线，可以使用:last-child伪类去除 */
.scheduling-plan p:last-child {
  border-bottom: none;
  padding-bottom: 0; /* 可选，去除最后一个p标签的多余底部填充 */
}
/* ------------ 排班计划安排end  ------------ */



.area {
  background-color: #f4f5f9;
  padding: 5px;
  border-radius: 10px;
}


.schedule-box {
  background-color: #78a23a;
  padding: 10px;
  border-radius: 5px;
  color: white;
}

.schedule-list li {
  border-bottom: 1px solid #ccc;
  padding: 5px 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}

.data-table thead th {
  background-color: #f0f6e8;
}

.text-list p {
  margin-bottom: 10px;
  font-size: 13px;
}
</style>